<html>
	<head>
		<title>html5-RockPaperScissors</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<style>body {
    margin: 0;
    padding: 0;
    font: 14px/1.5 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
    color: #252519;
}
a {
    color: #252519;
}
a:hover {
    text-decoration: underline;
    color: #19469D;
}
p {
    margin: 12px 0;
}
h1, h2, h3 {
    margin: 0;
    padding: 0;
}
table#source {
    width: 100%;
    border-collapse: collapse;
}
table#source td:first-child {
    padding: 30px 40px 30px 40px;
    vertical-align: top;
}
table#source td:first-child,
table#source td:first-child pre {
    width: 450px;
}
table#source td:last-child {
    padding: 30px 0 30px 40px;
    border-left: 1px solid #E5E5EE;
    background: #F5F5FF;
}
table#source tr {
    border-bottom: 1px solid #E5E5EE;
}
table#source tr.filename {
    padding-top: 40px;
    border-top: 1px solid #E5E5EE;
}
table#source tr.filename td:first-child {
    text-transform: capitalize;
}
table#source tr.filename td:last-child {
    font-size: 12px;
}
table#source tr.filename h2 {
    margin: 0;
    padding: 0;
    cursor: pointer;
}
table#source tr.code h1,
table#source tr.code h2,
table#source tr.code h3 {
    margin-top: 30px;
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
    font-size: 18px;
}
table#source tr.code h2 {
    font-size: 16px;
}
table#source tr.code h3 {
    font-size: 14px;
}
table#source tr.code ul {
    margin: 15px 0 15px 35px;
    padding: 0;
}
table#source tr.code ul li {
    margin: 0;
    padding: 1px 0;
}
table#source tr.code ul li p {
    margin: 0;
    padding: 0;
}
table#source tr.code td:first-child pre {
    padding: 20px;
}
#ribbon {
    position: fixed;
    top: 0;
    right: 0;
}
code .string { color: #219161; }
code .regexp { color: #219161; }
code .keyword { color: #954121; }
code .number { color: #19469D; }
code .comment { color: #bbb; }
code .this { color: #19469D; }</style>
		<script>
			$(function(){
				$('tr.code').hide();
				$('tr.filename').toggle(function(){
					$(this).nextUntil('.filename').fadeIn();
				}, function(){
					$(this).nextUntil('.filename').fadeOut();
				});
			});
		</script>
	</head>
	<body>
<table id="source"><tbody><tr><td><h1>html5-RockPaperScissors</h1><p>RockPaperScissors on WebSocket</p></td><td></td></tr><tr class="filename"><td><h2 id="contrib/rockPaperScissors/main.js"><a href="#">main</a></h2></td><td>contrib/rockPaperScissors/main.js</td></tr><tr class="code">
<td class="docs">
<ul><li><p>explaination on the game http://en.wikipedia.org/wiki/Rock-paper-scissors</p></li><li><p>fix the connection establishmenet. this is like a tcp connection establishement</p><ul><li>with a simulteneous open case which is super frequent</li><li>http://www.tcpipguide.com/free/t_TCPConnectionEstablishmentProcessTheThreeWayHandsh-3.htm</li><li>http://www.tcpipguide.com/free/t_TCPConnectionEstablishmentProcessTheThreeWayHandsh-4.htm</li></ul></li><li>display a nice log of current game events<ul><li>thus it is easier to diagnose the issues</li></ul></li></ul>
</td>
<td class="code">

</td>
</tr>
<tr class="code">
<td class="docs">
<p>Define the namespace</p>
</td>
<td class="code">
<pre><code><span class="keyword">var</span> <span class="class">Rockps</span>	= {}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Rockps.Move defines the various moves</p>
</td>
<td class="code">
<pre><code><span class="class">Rockps</span>.<span class="class">Move</span>		= <span class="keyword">function</span>(<span class="variable">value</span>){
	<span class="this">this</span>.<span class="variable">value</span>	= <span class="variable">value</span>;
};

<span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">NONE</span>	= &<span class="variable">quot</span>;<span class="variable">none</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">ROCK</span>	= &<span class="variable">quot</span>;<span class="variable">rock</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">SCISSORS</span>	= &<span class="variable">quot</span>;<span class="variable">scissors</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">PAPER</span>	= &<span class="variable">quot</span>;<span class="variable">paper</span>&<span class="variable">quot</span>;;

<span class="class">Rockps</span>.<span class="class">Move</span>.<span class="variable">getRandom</span>	= <span class="keyword">function</span>(){
	<span class="keyword">var</span> <span class="variable">moves</span>	= [<span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">ROCK</span>, <span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">SCISSORS</span>, <span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">PAPER</span>];
	<span class="keyword">var</span> <span class="variable">idx</span>		= <span class="class">Math</span>.<span class="variable">floor</span>(<span class="class">Math</span>.<span class="variable">random</span>() * <span class="variable">moves</span>.<span class="variable">length</span>)
	<span class="keyword">return</span> <span class="keyword">new</span> <span class="class">Rockps</span>.<span class="class">Move</span>(<span class="variable">moves</span>[<span class="variable">idx</span>]);
}
<span class="class">Rockps</span>.<span class="class">Move</span>.<span class="variable">prototype</span>.<span class="variable">imageUrl</span>	= <span class="keyword">function</span>(){
	<span class="keyword">var</span> <span class="variable">imageUrls</span>	= {
		&<span class="variable">quot</span>;<span class="variable">rock</span>&<span class="variable">quot</span>;		: &<span class="variable">quot</span>;<span class="variable">image</span>/<span class="variable">rock</span>.<span class="variable">png</span>&<span class="variable">quot</span>;,
		&<span class="variable">quot</span>;<span class="variable">paper</span>&<span class="variable">quot</span>;		: &<span class="variable">quot</span>;<span class="variable">image</span>/<span class="variable">paper</span>.<span class="variable">png</span>&<span class="variable">quot</span>;,
		&<span class="variable">quot</span>;<span class="variable">scissors</span>&<span class="variable">quot</span>;	: &<span class="variable">quot</span>;<span class="variable">image</span>/<span class="variable">scissors</span>.<span class="variable">png</span>&<span class="variable">quot</span>;
	}
	<span class="variable">console</span>.<span class="variable">assert</span>(<span class="this">this</span>.<span class="variable">isFromPlayer</span>())
	<span class="keyword">return</span> <span class="variable">imageUrls</span>[<span class="this">this</span>.<span class="variable">value</span>];
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Display an &lt;img&gt; of a given move in a container</p>
</td>
<td class="code">
<pre><code><span class="class">Rockps</span>.<span class="class">Move</span>.<span class="variable">prototype</span>.<span class="variable">display</span>	= <span class="keyword">function</span>(<span class="variable">container</span>){
	<span class="variable">jQuery</span>(&<span class="variable">quot</span>;&<span class="variable">lt</span>;<span class="variable">img</span>&<span class="variable">gt</span>;&<span class="variable">quot</span>;)
		.<span class="variable">attr</span>(<span class="string">'width'</span>, <span class="number integer">128</span>)
		.<span class="variable">attr</span>(<span class="string">'height'</span>, <span class="number integer">128</span>)
		.<span class="variable">attr</span>(&<span class="variable">quot</span>;<span class="variable">src</span>&<span class="variable">quot</span>;, <span class="this">this</span>.<span class="variable">imageUrl</span>())
		.<span class="variable">replaceAll</span>(<span class="variable">container</span>);	
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<h2></h2>

<ul><li><strong>return</strong>: <em>Boolean</em>  true if the move may be from a player, false otherwise</li></ul>
</td>
<td class="code">
<pre><code><span class="class">Rockps</span>.<span class="class">Move</span>.<span class="variable">prototype</span>.<span class="variable">isFromPlayer</span>= <span class="keyword">function</span>(<span class="variable">move</span>){
	<span class="keyword">return</span> [<span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">ROCK</span>, <span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">SCISSORS</span>, <span class="class">Rockps</span>.<span class="class">Move</span>.<span class="class">PAPER</span>].<span class="variable">indexOf</span>(<span class="this">this</span>.<span class="variable">value</span>) != -<span class="number integer">1</span>;
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Decide the result of the game based on player moves</p>

<h2></h2>

<ul><li><strong>returns</strong>: <em>Rockps.Result</em>  return the result for the first player</li></ul>
</td>
<td class="code">
<pre><code><span class="class">Rockps</span>.<span class="class">Move</span>.<span class="variable">prototype</span>.<span class="variable">decideResult</span>	= <span class="keyword">function</span>(<span class="variable">otherMove</span>){
	<span class="keyword">var</span> <span class="variable">moveCmpGt</span>	= <span class="keyword">function</span>(<span class="variable">myMove</span>, <span class="variable">otherMove</span>){
		<span class="keyword">var</span> <span class="class">MOVE</span>	= <span class="class">Rockps</span>.<span class="class">Move</span>;
		<span class="keyword">if</span>( <span class="variable">myMove</span> === <span class="class">MOVE</span>.<span class="class">ROCK</span>	&<span class="variable">amp</span>;&<span class="variable">amp</span>; <span class="variable">otherMove</span> === <span class="class">MOVE</span>.<span class="class">SCISSORS</span>)	<span class="keyword">return</span> <span class="variable">true</span>;
		<span class="keyword">if</span>( <span class="variable">myMove</span> === <span class="class">MOVE</span>.<span class="class">SCISSORS</span>	&<span class="variable">amp</span>;&<span class="variable">amp</span>; <span class="variable">otherMove</span> === <span class="class">MOVE</span>.<span class="class">PAPER</span> )	<span class="keyword">return</span> <span class="variable">true</span>;
		<span class="keyword">if</span>( <span class="variable">myMove</span> === <span class="class">MOVE</span>.<span class="class">PAPER</span>	&<span class="variable">amp</span>;&<span class="variable">amp</span>; <span class="variable">otherMove</span> === <span class="class">MOVE</span>.<span class="class">ROCK</span> )	<span class="keyword">return</span> <span class="variable">true</span>;
		<span class="keyword">return</span> <span class="variable">false</span>;		
	}
	<span class="keyword">if</span>( <span class="variable">moveCmpGt</span>(<span class="this">this</span>.<span class="variable">value</span>, <span class="variable">otherMove</span>.<span class="variable">value</span>) )	<span class="keyword">return</span> <span class="keyword">new</span> <span class="class">Rockps</span>.<span class="class">Result</span>(<span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">WIN</span>);
	<span class="keyword">if</span>( <span class="variable">moveCmpGt</span>(<span class="variable">otherMove</span>.<span class="variable">value</span>, <span class="this">this</span>.<span class="variable">value</span>) )	<span class="keyword">return</span> <span class="keyword">new</span> <span class="class">Rockps</span>.<span class="class">Result</span>(<span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">LOSS</span>);
	<span class="keyword">return</span> <span class="keyword">new</span> <span class="class">Rockps</span>.<span class="class">Result</span>(<span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">DRAW</span>);
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">

</td>
<td class="code">
<pre><code><span class="class">Rockps</span>.<span class="class">Result</span>		= <span class="keyword">function</span>(<span class="variable">value</span>){
	<span class="this">this</span>.<span class="variable">value</span>	= <span class="variable">value</span>;
};</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Rockps.Result defines the possible game results</p>
</td>
<td class="code">
<pre><code><span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">NONE</span>	= &<span class="variable">quot</span>;<span class="variable">none</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">WIN</span>	= &<span class="variable">quot</span>;<span class="variable">win</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">DRAW</span>	= &<span class="variable">quot</span>;<span class="variable">draw</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">LOSS</span>	= &<span class="variable">quot</span>;<span class="variable">loss</span>&<span class="variable">quot</span>;;

<span class="class">Rockps</span>.<span class="class">Result</span>.<span class="variable">prototype</span>.<span class="variable">display</span>	= <span class="keyword">function</span>(<span class="variable">container</span>){
	<span class="keyword">var</span> <span class="variable">texts</span>	= {
		&<span class="variable">quot</span>;<span class="variable">win</span>&<span class="variable">quot</span>;	: &<span class="variable">quot</span>;<span class="class">You</span> <span class="class">Won</span>!! <span class="variable">congratulation</span>&<span class="variable">quot</span>;,
		&<span class="variable">quot</span>;<span class="variable">draw</span>&<span class="variable">quot</span>;	: &<span class="variable">quot</span>;<span class="class">Draw</span>. <span class="variable">great</span> <span class="variable">minds</span> <span class="variable">meet</span> <span class="variable">each</span> <span class="variable">other</span>&<span class="variable">quot</span>;,
		&<span class="variable">quot</span>;<span class="variable">loss</span>&<span class="variable">quot</span>;	: &<span class="variable">quot</span>;<span class="class">You</span> <span class="variable">lose</span>... <span class="class">Better</span> <span class="variable">luck</span> <span class="variable">next</span> <span class="variable">time</span> ?&<span class="variable">quot</span>;
	}
	<span class="variable">jQuery</span>(&<span class="variable">quot</span>;&<span class="variable">lt</span>;<span class="variable">p</span>&<span class="variable">gt</span>;&<span class="variable">quot</span>;)
		.<span class="variable">text</span>(<span class="variable">texts</span>[<span class="this">this</span>.<span class="variable">value</span>])
		.<span class="variable">appendTo</span>(<span class="variable">jQuery</span>(<span class="variable">container</span>).<span class="variable">empty</span>());		
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Rockps.Result defines the possible game results</p>
</td>
<td class="code">
<pre><code><span class="class">Rockps</span>.<span class="class">MESSAGE</span>			= {};
<span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">NONE</span>		= &<span class="variable">quot</span>;<span class="variable">none</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">HELLO_SYN</span>	= &<span class="variable">quot</span>;<span class="variable">hello_syn</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">HELLO_ACK</span>	= &<span class="variable">quot</span>;<span class="variable">hello_ack</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">HELLO_SYNACK</span>	= &<span class="variable">quot</span>;<span class="variable">hello_synack</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">PLY</span>		= &<span class="variable">quot</span>;<span class="variable">ply</span>&<span class="variable">quot</span>;;</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Define the game class</p>
</td>
<td class="code">
<pre><code><span class="class">Rockps</span>.<span class="class">Game</span>		= <span class="keyword">function</span>(){
	<span class="keyword">var</span> <span class="variable">curState</span>	= <span class="class">Rockps</span>.<span class="class">Game</span>.<span class="class">STATE</span>.<span class="class">NONE</span>;
	<span class="keyword">var</span> <span class="variable">username</span>	= &<span class="variable">quot</span>;<span class="variable">user</span>-&<span class="variable">quot</span>;+<span class="class">Math</span>.<span class="variable">floor</span>(<span class="class">Math</span>.<span class="variable">random</span>() * <span class="number integer">1000000</span>).<span class="variable">toString</span>(<span class="number integer">32</span>);
	<span class="keyword">var</span> <span class="variable">otherUserName</span>= <span class="keyword">null</span>;
	<span class="keyword">var</span> <span class="variable">myMove</span>	= <span class="class">Rockps</span>.<span class="class">Move</span>.<span class="variable">getRandom</span>();
	
<span class="variable">console</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">myMove</span>&<span class="variable">quot</span>;, <span class="variable">myMove</span>);
(<span class="keyword">function</span>(){
	<span class="keyword">var</span> <span class="variable">localMove</span>	= <span class="class">Rockps</span>.<span class="class">Move</span>.<span class="variable">getRandom</span>();
	<span class="keyword">var</span> <span class="variable">remoteMove</span>	= <span class="class">Rockps</span>.<span class="class">Move</span>.<span class="variable">getRandom</span>();
	<span class="keyword">var</span> <span class="variable">result</span>	= <span class="variable">localMove</span>.<span class="variable">decideResult</span>(<span class="variable">remoteMove</span>);
	<span class="comment">// display everything</span>
	<span class="variable">localMove</span>	.<span class="variable">display</span>(&<span class="variable">quot</span>;.<span class="variable">content</span> .<span class="variable">playerContainer</span>.<span class="variable">localPlayer</span> .<span class="variable">move</span>&<span class="variable">quot</span>;);
	<span class="variable">remoteMove</span>	.<span class="variable">display</span>(&<span class="variable">quot</span>;.<span class="variable">content</span> .<span class="variable">playerContainer</span>.<span class="variable">remotePlayer</span> .<span class="variable">move</span>&<span class="variable">quot</span>;);
	<span class="variable">result</span>		.<span class="variable">display</span>(&<span class="variable">quot</span>;.<span class="variable">content</span> .<span class="variable">resultContainer</span>&<span class="variable">quot</span>;);
})();</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<pre><code> * Initialise the websocket
</code></pre>
</td>
<td class="code">
<pre><code><span class="keyword">var</span> <span class="variable">socket</span>	= <span class="keyword">new</span> <span class="class">EasyWebSocket</span>(&<span class="variable">quot</span>;<span class="variable">ws</span>:<span class="comment">//easywebsocket.org/html5-rockpaperscissors&quot;);</span>
	<span class="variable">socket</span>.<span class="variable">onopen</span>	= <span class="keyword">function</span>() {
		<span class="variable">console</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="class">Connnected</span> <span class="variable">to</span>&<span class="variable">quot</span>;, <span class="this">this</span>.<span class="variable">url</span>, <span class="this">this</span>)
		<span class="variable">socket</span>.<span class="variable">send</span>(<span class="class">JSON</span>.<span class="variable">stringify</span>({
			<span class="variable">type</span>	: <span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">HELLO_SYN</span>,
			<span class="variable">data</span>	: {
				<span class="variable">srcUserName</span>	: <span class="variable">username</span>
			}
		}))	
	}
	<span class="variable">socket</span>.<span class="variable">onmessage</span> = <span class="keyword">function</span>(<span class="variable">event</span>) {
		<span class="keyword">var</span> <span class="variable">message</span>	= <span class="class">JSON</span>.<span class="variable">parse</span>(<span class="variable">event</span>.<span class="variable">data</span>)
		<span class="variable">console</span>.<span class="variable">assert</span>(<span class="keyword">typeof</span>(<span class="variable">message</span>.<span class="variable">type</span>) != &<span class="variable">quot</span>;<span class="variable">undefined</span>&<span class="variable">quot</span>;);
		<span class="variable">console</span>.<span class="variable">assert</span>(<span class="keyword">typeof</span>(<span class="variable">message</span>.<span class="variable">data</span>) != &<span class="variable">quot</span>;<span class="variable">undefined</span>&<span class="variable">quot</span>;);
		<span class="comment">// ignore messages from myself</span>
		<span class="keyword">if</span>( <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcUserName</span> == <span class="variable">username</span> )	<span class="keyword">return</span>;
		<span class="comment">// log the event</span>
		<span class="variable">console</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">message</span>&<span class="variable">quot</span>;, &<span class="variable">quot</span>;<span class="variable">type</span>&<span class="variable">quot</span>;, <span class="variable">message</span>.<span class="variable">type</span>, &<span class="variable">quot</span>;<span class="variable">data</span>&<span class="variable">quot</span>;, <span class="variable">message</span>.<span class="variable">data</span>)
		<span class="comment">// parse according to message.type</span>
		<span class="keyword">if</span>( <span class="variable">message</span>.<span class="variable">type</span> == <span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">HELLO_SYN</span> ){
			<span class="comment">// answer by a HELLO_ACK</span>
			<span class="variable">socket</span>.<span class="variable">send</span>(<span class="class">JSON</span>.<span class="variable">stringify</span>({
				<span class="variable">type</span>	: <span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">HELLO_ACK</span>,
				<span class="variable">data</span>	: {
					<span class="variable">srcUserName</span>	: <span class="variable">username</span>,
					<span class="variable">dstUserName</span>	: <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcUserName</span>,
					<span class="variable">room</span>		: &<span class="variable">quot</span>;<span class="variable">room</span>-&<span class="variable">quot</span>;+<span class="class">Math</span>.<span class="variable">floor</span>(<span class="class">Math</span>.<span class="variable">random</span>() * <span class="number integer">1000000</span>).<span class="variable">toString</span>(<span class="number integer">32</span>)
				}
			}))
		}<span class="keyword">else</span> <span class="keyword">if</span>( <span class="variable">message</span>.<span class="variable">type</span> == <span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">HELLO_ACK</span> ){
			<span class="keyword">var</span> <span class="variable">otherUserName</span>	= <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcUserName</span>
			<span class="comment">// ignore message who arent from myself</span>
			<span class="keyword">if</span>( <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">dstUserName</span> != <span class="variable">username</span> )	<span class="keyword">return</span>;
			<span class="comment">// reply to this message</span>
			<span class="variable">socket</span>.<span class="variable">send</span>(<span class="class">JSON</span>.<span class="variable">stringify</span>({
				<span class="variable">type</span>	: <span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">HELLO_SYNACK</span>,
				<span class="variable">data</span>	: {
					<span class="variable">srcUserName</span>	: <span class="variable">username</span>,
					<span class="variable">dstUserName</span>	: <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcUserName</span>,
					<span class="variable">room</span>		: <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">room</span>
				}
			}))
		}<span class="keyword">else</span> <span class="keyword">if</span>( <span class="variable">message</span>.<span class="variable">type</span> == <span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">HELLO_SYNACK</span> ){
			
		}<span class="keyword">else</span> <span class="keyword">if</span>( <span class="variable">message</span>.<span class="variable">type</span> == <span class="class">Rockps</span>.<span class="class">MESSAGE</span>.<span class="class">PLY</span> ){
			<span class="comment">// ignore message who arent from myself</span>
			<span class="keyword">if</span>( <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">dstUserName</span> != <span class="variable">username</span> )	<span class="keyword">return</span>;
			<span class="comment">// log the event</span>
			<span class="variable">console</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="class">Your</span> <span class="variable">move</span> <span class="variable">is</span> &<span class="variable">quot</span>;, <span class="variable">myMove</span>)
			<span class="variable">console</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">opponent</span> <span class="variable">is</span> &<span class="variable">quot</span>;, <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcUserName</span>,&<span class="variable">quot</span>; <span class="variable">and</span> <span class="variable">its</span> <span class="variable">move</span> <span class="variable">is</span>&<span class="variable">quot</span>;, <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcMove</span>)
			<span class="comment">// compute the result</span>
			<span class="keyword">var</span> <span class="variable">result</span>	= <span class="class">Rockps</span>.<span class="class">Move</span>.<span class="variable">decideResult</span>(<span class="variable">myMove</span>, <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcMove</span>);
			<span class="keyword">if</span>( <span class="variable">result</span> == <span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">WIN</span> ){
				<span class="variable">console</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="class">Congrats</span> <span class="variable">you</span> <span class="variable">win</span> <span class="variable">against</span>&<span class="variable">quot</span>;, <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcUserName</span>)
			}<span class="keyword">else</span> <span class="keyword">if</span>( <span class="variable">result</span> == <span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">LOSS</span> ){
				<span class="variable">console</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="class">Unfortunatly</span> <span class="variable">you</span> <span class="variable">lost</span> <span class="variable">against</span>&<span class="variable">quot</span>;, <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcUserName</span>)
			}<span class="keyword">else</span> <span class="keyword">if</span>( <span class="variable">result</span> == <span class="class">Rockps</span>.<span class="class">Result</span>.<span class="class">DRAW</span> ){
				<span class="variable">console</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="class">This</span> <span class="variable">is</span> <span class="variable">a</span> <span class="variable">draw</span> <span class="variable">against</span>&<span class="variable">quot</span>;, <span class="variable">message</span>.<span class="variable">data</span>.<span class="variable">srcUserName</span>)
			}<span class="keyword">else</span> <span class="variable">console</span>.<span class="variable">assert</span>(<span class="variable">false</span>);
		}
	}

}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Describe the possible STATE of a Rockps.Game</p>
</td>
<td class="code">
<pre><code><span class="class">Rockps</span>.<span class="class">Game</span>.<span class="class">STATE</span>		= {};
<span class="class">Rockps</span>.<span class="class">Game</span>.<span class="class">STATE</span>.<span class="class">NONE</span>		= &<span class="variable">quot</span>;<span class="variable">none</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">Game</span>.<span class="class">STATE</span>.<span class="class">FINDOPPONENT</span>	= &<span class="variable">quot</span>;<span class="variable">findopponent</span>&<span class="variable">quot</span>;;
<span class="class">Rockps</span>.<span class="class">Game</span>.<span class="class">STATE</span>.<span class="class">PLAYING</span>	= &<span class="variable">quot</span>;<span class="variable">playing</span>&<span class="variable">quot</span>;;


	

<span class="variable">jQuery</span>(<span class="keyword">function</span>(){
	<span class="comment">// some global init </span>
	<span class="class">EasyWebSocket</span>.<span class="variable">iframeOrigin</span>	= &<span class="variable">quot</span>;<span class="variable">http</span>:<span class="comment">//localhost:8080&quot;;</span>
	<span class="comment">//EasyWebSocket.logFunction	= function(){ console.log.apply(console, arguments) };</span>

	<span class="keyword">var</span> <span class="variable">game</span>	= <span class="keyword">new</span> <span class="class">Rockps</span>.<span class="class">Game</span>();	
});</code></pre>
</td>
</tr>	</body>
</html></tbody></table>